<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通知</title>
    <link  rel="stylesheet"  href="<%=path%>/myoa/scripts/layui/css/layui.css"  media="all">
    <script type="text/javascript" src="<%=path%>/myoa/scripts/layui/layui.js" charset="utf-8"></script>
    <script src="<%=path%>/myoa/scripts/js/jquery-2.1.1.min.js"></script>
    <script src="<%=path%>/myoa/scripts/js/vue.min.js"></script>
    <script src="<%=path%>/myoa/scripts/js/vue.js"></script>
    <style>
        h3{
            padding-left: 20%;
           
        }
        .table_notice{
            width: 60%;
            margin: auto;
            border:0px;
        }
        #hav{
        	margin-top: 30px;
        }
        #td{
        	text-align :center;
        }
        input{
        	width:500px;
        	height:30px;
        	margin-top: 10px;
        }
        #content{
        	width:500px;
        	height: 100px;
        	max-height: 100px;
        	max-width: 800px;
        	margin-top: 10px;
        	margin-bottom: 10px;
        }
        .hideBBS{
        	display:none;
        }
        #fenye{
        	margin-top: 10px;
        	margin-bottom: 10px;
        }
       	
    </style>
</head>
<body>
<div id="main">
	<div class="table_notice">
		<% session.setAttribute("bbs_userid", 2);%>
		<% session.setAttribute("bbs_name", "李四");%>
		<div class="layui-breadcrumb" id="hav">
		  <a href="bbs.jsp">公共信息</a>
		  <a><cite>內部论坛</cite></a>
		</div>
 		
  		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  			<legend>来聊天论坛</legend>
  			<input id="bt" style="width: 300px;" type="text" placeholder="搜索标题"> 
  			<input id="zz" style="width: 300px;" type="text" placeholder="搜索作者"> 
  			<button class="layui-btn layui-btn-primary" v-on:click="showbbs()">点我搜索</button>
		</fieldset>

		<table class="layui-table" lay-even="" lay-skin="nob">
			<colgroup>
				<col width="250">
				<col width="100">
				<col width="150">
				<col width="80">
			</colgroup>
			<thead>
				<tr>	
					<th id="td">主题</th>
					<th id="td">作者</th>
					<th id="td">时间</th>
					<th id="td">操作</th>
				</tr>
			</thead>
			<thead>
				<tr v-for="bl in blist">
					<td id="td"><a href="<%=path%>/showbbs?bid={{bl.bbs_id}}">{{bl.bbs_title}}</a></td>
					<td id="td"><a href="<%=path%>/showUser?userid={{bl.bbs_userid}}">{{bl.bbs_name}}</a></td>
					<td id="td">{{bl.bbs_time}}</td>
					<td align="center" >
						<button v-on:click="deletebbs($event,bl.bbs_id)" id="debbs" class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
					</td>
				</tr>
			</thead>
		</table>
		<div id="fenye"></div>
		<div align="center" id="addBBS" v-on:click="show()">
<button class="layui-btn layui-btn-normal layui-btn-radius" id="button">我有更好的内容添加个新主题</button>
			<div id="showadd" class="hideBBS" >
				<input id="title" name="bbs_title" placeholder="我要添加标题"><br />
				<textarea style="height:120px;width:504px;max-width:504px;max-height:120px;min-width:504px;min-height:120px;" id="content" rows="20" cols="60" placeholder="我要添加内容"></textarea><br />
				<button id="add" name="bbs_title" v-on:click="insertbbs()" class="layui-btn layui-btn-warm layui-btn-radius">我要发布</button>
				<button id="hideadd" name="bbs_content" class="layui-btn layui-btn-radius" >我还是再看看吧</button>
			</div>
		</div>
		
	</div>
</div>

<script>
$(function(){
	var vue=new Vue({
		el:"#main",			//作用域
		data:{			//数据名称
			blist:'',	
		},
		methods:{		//方法名
			
			showbbs:function(curr){		//查询首页帖子信息
				var bbs_title=$("#bt").val();
				var bbs_name=$("#zz").val();
				$.ajax({
					url:'../querybbs',
					type:'post',
					data:{curr:curr,bbs_title:bbs_title,bbs_name:bbs_name},
					dataType:'json',
					success:function(result){
						console.log("输出测试"+result.mlist);
						vue.blist=result.mlist;
						
						layui.use(['laypage', 'layer'], function(){		//layPage的固定格式，分页
							var laypage = layui.laypage,
							layer = layui.layer;
							laypage.render({
								elem:'fenye',			//作用域	
								curr:curr,				//当前页
								count:result.total,		//获取总数	
								limit:4,  				//获取每页显示 
								layout: ['count', 'prev', 'page', 'next', 'skip'], 
								jump:function(obj,first){
									console.log(".............");
									if(!first){
										vue.showbbs(obj.curr);
									}
								}
							})
						});
					}
				})
			},
			deletebbs:function(event,bid){
				var el = event.currentTarget;	//获取当前点击的dom对象
				console.log("删除测试"+bid);
				$.ajax({
					url:'../deletebbs',
					type:'post',
					data:{bid:bid},
					dataType:'json',
					success:function(result){
						console.log("添加返回值测试"+result);
						if(result!=0){
							alert("已删除");
							location.reload();
						}else{
							alert("再来吧");
						}
					}
				})			
			},
			insertbbs:function(){
				console.log("添加测试");
				var bbs_title=$("#title").val();
				var bbs_content=$("#content").val();
				console.log(bbs_title);
				console.log(bbs_content);
				if(bbs_title==''){
					alert("兄弟,标签不能为空");
					location.reload();
				}
				if(bbs_content==''){
					alert("内容不能为空呢");
					location.reload();
				}else{
					console.log("添加进入测试");
					$.ajax({
						url:'../insertbbs',
						type:'post',
						data:{bbs_title:bbs_title,bbs_content:bbs_content},
						dataType:'json',
						success:function(result){
							console.log("添加返回值测试"+result);
							if(result!=0){
								alert("成功");
							}else{
								alert("炸了");
							}
							location.reload();
						}
						
					})
				}
			}
			
		}
	})	
	vue.showbbs(1);			//调用
						
});
layui.use('element', function(){
  var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
  //监听导航点击
  element.on('nav(demo)', function(elem){	//layui的页面效果
    //console.log(elem)
    layer.msg(elem.text());
  });
});
$("#button").click(function(){			//点击一个按钮显示/隐藏
	if($('#showadd').is(':hidden')){
		$('#showadd').show();
	}else{
		$('#showadd').hide();
	}
});
$("#hideadd").click(function(){			//隐藏添加框架
	$('#showadd').hide();
})
</script>
</body>
</html>